<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/iconfont.css">
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <header>
    <div class="container">
      <div class="row">
        <div class="col-md-2">
          <a href=""><span class="logo-text">DJI 大疆官网</span></a>
          <a href="javascript:void(0)" class="Logined none">
            <span>
              欢迎,<span class="userName"></span>
            </span>
          </a>
        </div>
        <div class="col-md-10">
          <div class="header-right">
            <span><a href="my_account.html" class="myAccount none">我的账号</a></span>
            <a href="login.html" class="unLogin"><span>登录</span></a>
            <span class="line"></span>
            <a href="shoppingCar.html"><span class="car">购物车</span></a>
            <span class="iconfont icon-home"></span>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div class="wrap">
    <div class="top">
      <div class="container">
        <div class="row">
          <div class="col-md-2 logo-part">
            <span class="LoGo-img"> <img src="./img/index_img/timg.jpg" alt=""></span>
            <span class="shop-text">商城</span>
          </div>
          <div class="col-md-5 nav">
            <ul>
              <li>
                <span>商品分类</span>
                <span class="iconfont icon-paixujiantouxia
                "></span>
              </li>
              <li>
                <span>以旧换新</span>
              </li>
              <li>
                <span>购机指南</span>
              </li>
              <li>
                <span>DJI大疆商城APP</span>
              </li>
              <li>
                <span>优惠</span>
                <span class="iconfont icon-paixujiantouxia
                "></span>
              </li>
            </ul>
          </div>
          <div class="col-md-5">
            <div class="search">
              <a href="javascript:void(0)" onclick="searchGoods('')"><span class="iconfont icon-fangdajing"></span></a>
              <input class="searchGoods" type="text" placeholder="搜索商品...">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main one">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <ul>
              <li>
                <div class="item">
                  <a href="javascript:void(0)" onclick="searchGoods('御')"><img src="./img/index_img/mavic2.svg"
                      alt=""></a>
                </div>
                <span>
                  “御” Mavic
                </span>
              </li>
              <li>
                <div class="item">
                  <a href="javascript:void(0)" onclick="searchGoods('灵眸')"><img src="./img/index_img/ic-Tiny-70x56.svg"
                      alt=""></a>
                </div>
                <span>
                  灵眸 Osmo
                </span>
              </li>
              <li>
                <div class="item">
                  <a href="javascript:void(0)" onclick="searchGoods('精灵')"><img src="./img/index_img/phantom.svg"
                      alt=""></a>
                </div>
                <span>
                  精灵 Phantom
                </span>
              </li>
              <li>
                <div class="item">
                  <a href="javascript:void(0)" onclick="searchGoods('如影')"><img src="./img/index_img/4.svg" alt=""></a>
                </div>
                <span>
                  如影 Ronin
                </span>
              </li>
              <li>
                <div class="item">
                  <a href="javascript:void(0)" onclick="searchGoods('机甲')"><img src="./img/index_img/4.svg" alt=""></a>
                </div>
                <span>
                  机甲大师
                </span>
              </li>
              <li>
                <div class="item">
                  <a href="javascript:void(0)" onclick="searchGoods('FPV')"><img src="./img/index_img/9.svg" alt=""></a>
                </div>
                <span>
                  DJI FPV
                </span>
              </li>
              <li>
                <div class="item">
                  <a href="javascript:void(0)" onclick="searchGoods('悟')"><img src="./img/index_img/7.svg" alt=""></a>
                </div>
                <span>
                  “悟” Inspire
                </span>
              </li>
              <li>
                <div class="item">
                  <a href="javascript:void(0)" onclick="searchGoods('晓')"><img src="./img/index_img/8.svg" alt=""></a>
                </div>
                <span>
                  “晓” Spark
                </span>
              </li>
              <li>
                <div class="item">
                  <a href="javascript:void(0)" onclick="searchGoods('特洛')"><img src="./img/index_img/9.svg" alt=""></a>
                </div>
                <span>
                  睿炽科技丨特洛
                </span>
              </li>
              <li>
                <div class="item">
                  <a href="javascript:void(0)" onclick=""><img src="./img/index_img/10.svg" alt=""></a>
                </div>
                <span>
                  增值服务
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="main main-two">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./img/index_img/banner1.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./img/index_img/banner2.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./img/index_img/banner3.jpg" alt="">
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
      </div>
    </div>
    <div class="main main-three">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <a href="" style="text-decoration: none; color: #000;">
              <div class="good">
                <div class="topShow">
                  <img src="./img/index_img/goodsLong1.jpg" alt="">
                </div>
                <div class="centerShow">
                  <img src="./img/index_img/goods1.png" alt="">
                </div>
                <div class="insideShow">
                  <img src="./img/index_img/goodsinside1.jpg" alt="">
                </div>
                <div class="text">
                  御 MAVIC AIR 2
                </div>
                <span class="m-t-g-sp1">4K/60fps
                  视频34 分钟续航8K
                  移动延时摄影
                </span>
                <br>
                <span class="m-t-g-sp2">
                  可拍摄 8K 延时影片，4K/60fps 视频，4800 万像素照片。拥有最长 34 分钟续航，最远 10 公里图传距离，焦点跟随功能，支持自行避障。
                </span>
                <span class="m-t-g-sp2 m-t-g-sp3">
                  ¥4999
                </span>
              </div>
            </a>
          </div>
          <div class="col-md-4">
            <a href="" style="text-decoration: none; color: #000;">
              <div class="good">
                <div class="topShow">
                  <img src="./img/index_img/goodsLong2.jpg" alt="">
                </div>
                <div class="centerShow">
                  <img src="./img/index_img/goods2.png" alt="">
                </div>
                <div class="insideShow">
                  <img src="./img/index_img/goodsinside2.png" alt="">
                </div>
                <div class="text">
                  御 MAVIC MINI 航拍小飞机
                </div>
                <span class="m-t-g-sp1">249 克30 分钟续航轻松编辑分享视频
                </span>
                <br>
                <span class="m-t-g-sp2">
                  御 Mini 将强大飞行性能注入轻小机身中，可随时伴你出行，配合全新 DJI Fly app，助你畅快飞行，随心创作。
                </span>
                <span class="m-t-g-sp2 m-t-g-sp3">
                  ¥2499
                </span>
              </div>
            </a>
          </div>
          <div class="col-md-4">
            <a href="" style="text-decoration: none; color: #000;">
              <div class="good">
                <div class="topShow">
                  <img src="./img/index_img/goodsLong3.jpg" alt="">
                </div>
                <div class="centerShow">
                  <img src="./img/index_img/goods3.png" alt="">
                </div>
                <div class="insideShow">
                  <img src="./img/index_img/goodsinside3.png" alt="">
                </div>
                <div class="text">
                  灵眸手机云台 3
                </div>
                <span class="m-t-g-sp1">便携可折叠Story 模式手势控制
                </span>
                <br>
                <span class="m-t-g-sp2">
                  灵眸手机云台 3 采用可折叠设计，轻巧便携。三轴机械云台可实现无损防抖，丰富的智能模式，轻松应对日常记录和旅行拍摄。
                </span>
                <span class="m-t-g-sp2 m-t-g-sp3">
                  ¥599
                </span>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="main main-four">
      <div class="container">
        <div class="row">
          <div class="title">
            <span class="ti-le">"御"Mavic</span>
            <span class="fr ti-ri">
              <span>更多</span>
              <span class="iconfont icon-xiangyou
              "></span>
            </span>
          </div>
        </div>
        <div class="row goodsList">
          <!-- <div class="col-md-3">
            <div class="goods-link">
              <div class="goods">
                <div class="goods-pic-inside op-0">
                  <img src="./img/index_img/goodsin1.jpg" alt="">
                </div>
                <div class="goods-pic-outside">
                  <img src="./img/index_img/goodsout1.png" alt="">
                </div>
                <div class="t_center goods-introduce">御 Mavic Air 2 畅飞套装</div>
                <div class="t_center goods-price">¥6699</div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="goods-link">
              <div class="goods">
                <div class="goods-pic-inside op-0">
                  <img src="./img/index_img/goodsin1.jpg" alt="">
                </div>
                <div class="goods-pic-outside">
                  <img src="./img/index_img/goodsout1.png" alt="">
                </div>
                <div class="t_center goods-introduce">御 Mavic Air 2 畅飞套装</div>
                <div class="t_center goods-price">¥6699</div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="goods-link">
              <div class="goods">
                <div class="goods-pic-inside op-0">
                  <img src="./img/index_img/goodsin1.jpg" alt="">
                </div>
                <div class="goods-pic-outside">
                  <img src="./img/index_img/goodsout1.png" alt="">
                </div>
                <div class="t_center goods-introduce">御 Mavic Air 2 畅飞套装</div>
                <div class="t_center goods-price">¥6699</div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="goods-link">
              <div class="goods">
                <div class="goods-pic-inside op-0">
                  <img src="./img/index_img/goodsin1.jpg" alt="">
                </div>
                <div class="goods-pic-outside">
                  <img src="./img/index_img/goodsout1.png" alt="">
                </div>
                <div class="t_center goods-introduce">御 Mavic Air 2 畅飞套装</div>
                <div class="t_center goods-price">¥6699</div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="goods-link">
              <div class="goods">
                <div class="goods-pic-inside op-0">
                  <img src="./img/index_img/goodsin1.jpg" alt="">
                </div>
                <div class="goods-pic-outside">
                  <img src="./img/index_img/goodsout1.png" alt="">
                </div>
                <div class="t_center goods-introduce">御 Mavic Air 2 畅飞套装</div>
                <div class="t_center goods-price">¥6699</div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="goods-link">
              <div class="goods">
                <div class="goods-pic-inside op-0">
                  <img src="./img/index_img/goodsin1.jpg" alt="">
                </div>
                <div class="goods-pic-outside">
                  <img src="./img/index_img/goodsout1.png" alt="">
                </div>
                <div class="t_center goods-introduce">御 Mavic Air 2 畅飞套装</div>
                <div class="t_center goods-price">¥6699</div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="goods-link">
              <div class="goods">
                <div class="goods-pic-inside op-0">
                  <img src="./img/index_img/goodsin1.jpg" alt="">
                </div>
                <div class="goods-pic-outside">
                  <img src="./img/index_img/goodsout1.png" alt="">
                </div>
                <div class="t_center goods-introduce">御 Mavic Air 2 畅飞套装</div>
                <div class="t_center goods-price">¥6699</div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="goods-link">
              <div class="goods">
                <div class="goods-pic-inside op-0">
                  <img src="./img/index_img/goodsin1.jpg" alt="">
                </div>
                <div class="goods-pic-outside">
                  <img src="./img/index_img/goodsout1.png" alt="">
                </div>
                <div class="t_center goods-introduce">御 Mavic Air 2 畅飞套装</div>
                <div class="t_center goods-price">¥6699</div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="main main-four main-five">
      <div class="container">
        <div class="row">
          <div class="title">
            <span class="ti-le">灵眸 Osmo</span>
            <span class="fr ti-ri">
              <span>更多</span>
              <span class="iconfont icon-xiangyou
              "></span>
            </span>
          </div>
        </div>
        <div class="row">
          <div class="col-md-3">
            <div class="goods-link">
              <div class="goods">
                <div class="goods-pic-inside op-0">
                  <img src="./img/index_img/goodsin2.jpg" alt="">
                </div>
                <div class="goods-pic-outside">
                  <img src="./img/index_img/goodsout2.png" alt="">
                </div>
                <div class="t_center goods-introduce">御 Mavic Air 2 畅飞套装</div>
                <div class="t_center goods-price">¥6699</div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="goods-link">
              <div class="goods">
                <div class="goods-pic-inside op-0">
                  <img src="./img/index_img/goodsin2.jpg" alt="">
                </div>
                <div class="goods-pic-outside">
                  <img src="./img/index_img/goodsout2.png" alt="">
                </div>
                <div class="t_center goods-introduce">御 Mavic Air 2 畅飞套装</div>
                <div class="t_center goods-price">¥6699</div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="goods-link">
              <div class="goods">
                <div class="goods-pic-inside op-0">
                  <img src="./img/index_img/goodsin2.jpg" alt="">
                </div>
                <div class="goods-pic-outside">
                  <img src="./img/index_img/goodsout2.png" alt="">
                </div>
                <div class="t_center goods-introduce">御 Mavic Air 2 畅飞套装</div>
                <div class="t_center goods-price">¥6699</div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="goods-link">
              <div class="goods">
                <div class="goods-pic-inside op-0">
                  <img src="./img/index_img/goodsin2.jpg" alt="">
                </div>
                <div class="goods-pic-outside">
                  <img src="./img/index_img/goodsout2.png" alt="">
                </div>
                <div class="t_center goods-introduce">御 Mavic Air 2 畅飞套装</div>
                <div class="t_center goods-price">¥6699</div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="goods-link">
              <div class="goods">
                <div class="goods-pic-inside op-0">
                  <img src="./img/index_img/goodsin2.jpg" alt="">
                </div>
                <div class="goods-pic-outside">
                  <img src="./img/index_img/goodsout2.png" alt="">
                </div>
                <div class="t_center goods-introduce">御 Mavic Air 2 畅飞套装</div>
                <div class="t_center goods-price">¥6699</div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="goods-link">
              <div class="goods">
                <div class="goods-pic-inside op-0">
                  <img src="./img/index_img/goodsin2.jpg" alt="">
                </div>
                <div class="goods-pic-outside">
                  <img src="./img/index_img/goodsout2.png" alt="">
                </div>
                <div class="t_center goods-introduce">御 Mavic Air 2 畅飞套装</div>
                <div class="t_center goods-price">¥6699</div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="goods-link">
              <div class="goods">
                <div class="goods-pic-inside op-0">
                  <img src="./img/index_img/goodsin2.jpg" alt="">
                </div>
                <div class="goods-pic-outside">
                  <img src="./img/index_img/goodsout2.png" alt="">
                </div>
                <div class="t_center goods-introduce">御 Mavic Air 2 畅飞套装</div>
                <div class="t_center goods-price">¥6699</div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="goods-link">
              <div class="goods">
                <div class="goods-pic-inside op-0">
                  <img src="./img/index_img/goodsin2.jpg" alt="">
                </div>
                <div class="goods-pic-outside">
                  <img src="./img/index_img/goodsout2.png" alt="">
                </div>
                <div class="t_center goods-introduce">御 Mavic Air 2 畅飞套装</div>
                <div class="t_center goods-price">¥6699</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="video" style="margin: 0 auto;text-align: center;width: 50%;">
      <video loop autoplay muted src="./img/index_img/video1.mp4" data-vscid="xo9apwfn5" controls></video>
    </div>
  </div>
  <footer></footer>
  <script src="./js/swiper.min.js"></script>
  <script src="./js/jquery-3.4.1.min.js"></script>
  <script src="./js/url.js"></script>
  <script>
    init()

    // 页面初始化
    function init() {
      allGoods() //显示商品

      LoginOr() //判断是否有用户登录

      if (localStorage.goodsTitle) { //清空模糊搜索值
        delete localStorage.goodsTitle
      }
    }

    //判断是否由用户登录
    function LoginOr() {
      if (localStorage.username) {
        $('.userName').text(localStorage.username)
        $('.unLogin').addClass('none')
        $('.Logined,.myAccount').removeClass('none')
      }
    }

    //显示主页商品
    function allGoods() {
      $.ajax({
        type: 'POST',
        url: productUrl,
        data: { 'type': 'all' },
        dataType: 'json',
        xhrFields: { withCredentials: true },
        success: function (res) {
          console.log(res)
          if (res.status === 0) {
            console.log(res.data)
            //显示商品
            showGoods(res)
          } else if (res.status === 100) {
            console.log('没有用户登录')
          }
        },
        error: function () {
          console.log('错误')
        }
      })
    }

    //渲染商品
    function showGoods(res) {

      for (let i = 0; i < res.data.length; i++) {
        let goodsName = res.data[i].name
        let goodsPrice = res.data[i].price
        let category_id = res.data[i].category_id
        let product_id = res.data[i].id
        let main_image = res.data[i].main_image
        // console.log(product_id)
        let goodsLink =
          `
                <div class="col-md-3">
                  <div class="goods-link" onclick="details(${product_id})" goods_id="${category_id}">
                     <div class="goods">
                      <div class="goods-pic-inside op-0">
                        <img src="./img/index_img/goodsin1.jpg" alt="">
                      </div>
                      <div class="goods-pic-outside">
                        <img src="${imgUrl + main_image}" alt="">
                      </div>
                      <div class="t_center goods-introduce">${goodsName}</div>
                      <div class="t_center goods-price">¥${goodsPrice}</div>
                    </div>
                  </div>
                </div>
            `
        $('.main-four .goodsList').append(goodsLink)
      }
    }

    // 进入商品详情
    function details(e) {
      localStorage.product_id = e
      window.location.href = 'goodsDetails.html'
    }
  </script>
  <!-- 轮播图 -->
  <script>
    var mySwiper = new Swiper('.swiper-container', {
      // direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    })        
  </script>
  <!-- 鼠标划入商品 -->
  <script>
    // $('.goodsList').on('mouseenter', '.goods', function () {
    //   $(this).find('.insideShow').css('opacity', 1)
    //   $(this).find('.topShow,.centerShow').css('opacity', 0)
    // })
    // $('.goodsList').on('mouseleave', '.goods', function () {
    //   $(this).find('.insideShow').css('opacity', 0)
    //   $(this).find('.topShow,.centerShow').css('opacity', 1)
    // })
    $('.good').mouseenter(function () {
      $(this).find('.insideShow').css('opacity', 1)
      $(this).find('.topShow,.centerShow').css('opacity', 0)
    })
    $('.good').mouseleave(function () {
      $(this).find('.insideShow').css('opacity', 0)
      $(this).find('.topShow,.centerShow').css('opacity', 1)
    })
  </script>
  <script>
    // $('.goodsList').on('mouseenter', '.goods-link', function () {
    //   $(this).find('.goods-pic-inside').removeClass('op-0')
    //   $(this).find('.goods-pic-outside').addClass('op-0')
    // })
    // $('.goodsList').on('mouseleave', '.goods-link', function () {
    //   $(this).find('.goods-pic-inside').addClass('op-0')
    //   $(this).find('.goods-pic-outside').removeClass('op-0')
    // })

    $('.goods-link').mouseenter(function () {
      $(this).find('.goods-pic-inside').removeClass('op-0')
      $(this).find('.goods-pic-outside').addClass('op-0')
    })
    $('.goods-link').mouseleave(function () {
      $(this).find('.goods-pic-inside').addClass('op-0')
      $(this).find('.goods-pic-outside').removeClass('op-0')
    })
  </script>
  <!-- 模糊搜索商品 -->
  <script>
    function searchGoods(keyword) {
      const goodsTitle = $('.searchGoods').val()
      if (goodsTitle !== '') {
        localStorage.goodsTitle = goodsTitle
      }
      if (keyword !== '') {
        localStorage.goodsTitle = keyword
      }
      window.location.href = 'searchGoods.html'
    }
  </script>
</body>

</html>